<template>
  <div class="user-management-page">
    <el-page-header content="用户管理" />
    <el-card shadow="hover" class="mt-4">
      <!-- 页面标题与操作区 -->
      <div class="page-header">
        <el-button type="primary" icon="Plus">新增用户</el-button>
        <el-button type="success" icon="Download">导出数据</el-button>
        <el-button type="info" icon="Upload">导入数据</el-button>
      </div>

      <!-- 搜索表单 -->
      <el-form :model="searchForm" inline class="mt-4">
        <el-form-item label="用户名">
          <el-input v-model="searchForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态">
            <el-option label="正常" value="0" />
            <el-option label="禁用" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search">查询</el-button>
          <el-button icon="RefreshLeft">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 数据表格 -->
      <el-table :data="userList" border stripe class="mt-4">
        <el-table-column label="序号" type="index" width="80" />
        <el-table-column label="用户名" prop="username" width="180" />
        <el-table-column label="姓名" prop="nickName" width="180" />
        <el-table-column label="部门" prop="deptName" width="200" />
        <el-table-column label="角色" prop="roleNames" width="250" />
        <el-table-column label="状态" width="120">
          <template #default="scope">
            <el-switch
                v-model="scope.row.status"
                active-value="0"
                inactive-value="1"
                @change="handleStatusChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template #default="scope">
            <el-button type="text" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
            <el-button type="text" icon="Key" @click="handleResetPwd(scope.row)">重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页控件 -->
      <el-pagination
          class="mt-4"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElConfirm } from 'element-plus'

// 搜索表单数据
const searchForm = ref({
  username: '',
  status: ''
})

// 表格数据与分页
const userList = ref([
  // 模拟数据（实际项目中从接口获取）
  {
    userId: 1,
    username: 'admin',
    nickName: '管理员',
    deptName: '技术部',
    roleNames: '超级管理员',
    status: '0'
  },
  {
    userId: 2,
    username: 'test1',
    nickName: '测试用户1',
    deptName: '产品部',
    roleNames: '普通用户',
    status: '0'
  }
])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(userList.value.length)

// 分页事件
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  // 实际项目中此处调用接口重新获取数据
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  // 实际项目中此处调用接口重新获取数据
}

// 状态切换
const handleStatusChange = (row) => {
  const statusText = row.status === '0' ? '正常' : '禁用'
  ElMessage.success(`用户 ${row.username} 状态已切换为 ${statusText}`)
  // 实际项目中此处调用接口更新状态
}

// 编辑用户
const handleEdit = (row) => {
  ElMessage.info(`即将编辑用户：${row.username}`)
  // 实际项目中此处跳转编辑页面或打开编辑弹窗
}

// 删除用户
const handleDelete = (row) => {
  ElConfirm({
    title: '确认删除',
    message: `确定要删除用户 ${row.username} 吗？`,
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    async confirm() {
      // 实际项目中此处调用删除接口
      userList.value = userList.value.filter(item => item.userId !== row.userId)
      total.value = userList.value.length
      ElMessage.success('删除成功')
    }
  })
}

// 重置密码
const handleResetPwd = (row) => {
  ElMessage.info(`即将重置用户 ${row.username} 的密码`)
  // 实际项目中此处打开重置密码弹窗并调用接口
}
</script>

<style scoped>
.user-management-page {
  padding: 20px;
}
.page-header {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}
</style>
